<template>
  <div class="body_all">
    <!-- 操作按钮 -->
    <div class="top_btn">
      <el-button type="primary" icon="el-icon-plus" @click="addUser()"
        >添加</el-button
      >
    </div>
    <!-- 表格数据 -->
    <div class="center_content">
      <el-table
      v-loading="loading"
        :data="footerPage.currentPageData"
        border
        style="width: 100%"
        :header-cell-style="{
          background: '#fafafa',
          color: 'rgba(56, 56, 56, 1)',
        }"
      >
        <el-table-column prop="name" label="用户名" width="180" align="center">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="手机号码"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="ip" label="最后登录IP" align="center">
        </el-table-column>
        <el-table-column prop="last_login" label="最后登录时间" align="center">
        </el-table-column>
        <el-table-column label="状态" width="180" align="center">
          <template slot-scope="scope">
            <el-tooltip
              :content="
                scope.row.id === 1
                  ? scope.row.name + '作为初始管理员状态不可被修改'
                  : (scope.row.status === 1?'禁用':'启用')
              "
              placement="top"
            >
              <el-switch
                v-model="scope.row.status"
                :disabled="scope.row.id === 1"
                @change="state_edit(scope.row.status, scope.row.id)"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="2"
              >
              </el-switch>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="150" align="center">
          <template slot-scope="scope">
            <div class="table_btn">
              <button class="edit_btn" @click="edit_admin(scope.row)">
                编辑
              </button>
              <button class="del_btn" @click="del_admin(scope.row.id)">
                删除
              </button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 页码操作 -->
    <div class="footer">
      <el-button v-if="false" @click="firstPage" size="mini">首页</el-button>
      <span :class="footerPage.currentPage === 1 ? 'ban_btn_no' : ''"
        ><el-button
          id="parentpage"
          @click="prevPage"
          size="mini"
          :class="
            footerPage.currentPage === 1 ? 'ban_btn_stop' : 'page_operable'
          "
          >上一页</el-button
        ></span
      >
      <span class="page_operable">{{ footerPage.currentPage }}</span>
      <span>/</span>
      <span>{{ footerPage.totalPage }}</span>
      <span
        :class="
          footerPage.currentPage === footerPage.totalPage ? 'ban_btn_no' : ''
        "
        ><el-button
          id="nextpage"
          @click="nextPage"
          size="mini"
          :class="
            footerPage.currentPage === footerPage.totalPage
              ? 'ban_btn_stop'
              : 'page_operable'
          "
          >下一页</el-button
        ></span
      >
      <el-button v-if="false" @click="lastPage" size="mini">尾页</el-button>
    </div>
    <!-- 添加用户弹窗 -->
    <AddAdministrators
      ref="Popups"
      :editUser="editUser"
      @addAdmin="costPlannedAmountChange($event)"
    ></AddAdministrators
    ><!-- 解除冻结对话框 -->
  </div>
</template>

<script>
import AddAdministrators from "./AddAdministrators.vue"; // 解除冻结账户对话框
export default {
  components: {
    AddAdministrators,
  },
  data() {
    return {
      loading:false,
      tableData: [],
      editUser: [],
      footerPage: {
        list: null,
        listLoading: true,
        totalPage: 1, // 统共页数，默认为1
        currentPage: 1, //当前页数 ，默认为1
        pageSize: 5, // 每页显示数量
        currentPageData: [], //当前页显示内容
        headPage: 1,
      },
    };
  },
  created() {
    this.loading = true;
    this.getDate();
  },
  methods: {
    // 获取列表内容
    getDate() {
      this.$cmsapi
        .AdministratorsList()
        .then((res) => {
          if (res.code === 1 && res.msg === "登录已过期,请重新登录") {
            // 如果身份过期需要退出重新登陆
            var storage = window.localStorage;
            storage.clear();
            setTimeout(() => {
              this.$store.commit("logout", "false");
              this.$router.push({ path: "/login" });
            }, 1000);
            return;
          }
          this.tableData = res.data;
          this.footerPage.totalPage = Math.ceil(
            this.tableData.length / this.footerPage.pageSize
          );
          this.footerPage.totalPage =
            this.footerPage.totalPage == 0 ? 1 : this.footerPage.totalPage;
          this.getCurrentPageData();
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 设置当前页面的数据
    getCurrentPageData() {
      let begin = (this.footerPage.currentPage - 1) * this.footerPage.pageSize;
      let end = this.footerPage.currentPage * this.footerPage.pageSize;
      this.footerPage.currentPageData = this.tableData.slice(begin, end);
      this.loading = false;
    }, //上一页
    prevPage() {
      this.loading = true;
      if (this.footerPage.currentPage == 1) {
        return false;
      } else {
        this.footerPage.currentPage--;
        this.getCurrentPageData();
      }
      document.getElementById("parentpage").blur();
    }, // 下一页
    nextPage() {
      this.loading = true;
      if (this.footerPage.currentPage == this.footerPage.totalPage) {
        return false;
      } else {
        this.footerPage.currentPage++;
        this.getCurrentPageData();
      }
      document.getElementById("nextpage").blur();
    }, //尾页
    lastPage() {
      this.loading = true;
      if (this.footerPage.currentPage == this.footerPage.totalPage) {
        return false;
      } else {
        this.footerPage.currentPage = this.footerPage.totalPage;
        this.getCurrentPageData();
      }
    }, //首页
    firstPage() {
      this.loading = true;
      this.footerPage.currentPage = this.footerPage.headPage;
      this.getCurrentPageData();
    },
    // 跳转添加管理员页面
    addUser() {
      this.editUser = this.$options.data().editUser;
      this.$refs.Popups.centerDialogVisible = true;
    },
    // 新增管理员
    costPlannedAmountChange(value) {
      this.loading = true;
      let message_text = "";
      let param = {
        id: value.id ? value.id : "",
        name: value.userName,
        phone: value.phone,
        password: value.pass,
      };
      if (value.id === "") {
        message_text = "添加成功!";
      } else {
        message_text = "修改成功!";
      }
      this.$cmsapi
        .AdministratorsSave(param)
        .then((res) => {
          this.$message({
            type: "success",
            message: message_text,
          });
          this.getDate();
          this.editUser = this.$options.data().editUser;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 状态修改
    state_edit(callback, id) {
      this.$cmsapi
        .AdministratorsStateSave(id)
        .then((res) => {
          // console.log("状态已修改");
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 编辑管理员
    edit_admin(obj) {
      this.editUser = obj;
      this.$refs.Popups.centerDialogVisible = true;
    },
    // 删除管理员
    del_admin(id) {
      let that = this;
      this.$confirm("此操作将永久删除该管理员, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.loading = true;
          this.$cmsapi
            .AdministratorsStateDelete(id)
            .then((res) => {
              let mestext = "删除成功！";
              let type = "success";
              if (res.code === 1) {
                type = "error";
                mestext = "删除失败！请联系管理员";
              }
              this.$message({
                type: type,
                message: mestext,
              });
              that.getDate();
            })
            .catch((error) => {
              console.log(error);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style src="../../components/css/system_management_css/basicSettings.css"  scoped></style>
<style scoped>
</style>>